<template>
  <div class="tcr-total">
    <div>
      <div class="topimg">
        <img src="@/assets/header/header-1.png" alt="" />
        <p>学习分享平台-高中课程</p>
      </div>
    </div>
    <div class="mianbao">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">教师认证</el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tcr-cont">
      <div>
        <el-input
          class="psin"
          placeholder="请输入密码"
          v-model="password"
          show-password
        ></el-input>
        <el-select v-model="type" placeholder="请选择认证类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
      </div>
      <div class="btn">
        <el-button class="btninfo" type="primary" @click="toWrt"
          >认证</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    username: {
      type: String,
    },
  },
  data() {
    return {
      password: '',
      options: [
        {
          value: 'java初级教师',
          label: 'java初级教师',
        },
        {
          value: 'java中级教师',
          label: 'java中级教师',
        },
        {
          value: 'android初级教师',
          label: 'android初级教师',
        },
        {
          value: '骨灰级教师',
          label: '骨灰级教师',
          disabled: true,
        },
        {
          value: '其他',
          label: '其他',
        },
      ],
      type: '',
    }
  },
  methods: {
    //保存到待认证表
    async toWrt() {
      const that = this
      console.log('待认证需要信息', that.username, that.type)
      const { data: res } = await axios.get(
        'http://localhost:81/wrt/teacherRegist?password=' +
        that.password +
          '&username=' +
          that.username +
          '&type=' +
          that.type
      )
      console.log('认证提交', res)
      if (res.code == 200) {
        that.$router.back()
      } else {
        that.$message.error(res.msg)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.tcr-total {
  .topimg {
    position: relative;
    img {
      width: 90%;
      height: 100px;
      margin-left: 5%;
      margin-top: 20px;
      border-radius: 20px;
    }
    p {
      position: absolute;
      top: 0;
      left: 42%;
      color: white;
      font-size: 26px;
      line-height: 90px;
    }
  }
  .mianbao{
    margin-left: 100px;
    margin-top: 20px;
  }
  .tcr-cont {
    width: 1200px;
    height: 600px;
    margin-left: 250px;
    margin-top: 200px;
    .psin {
      width: 500px;
      margin-left: 280px;
    }
  }
  .btn {
    margin-left: 520px;
    margin-top: 50px;
    .btninfo {
      width: 150px;
    }
  }
}
</style>
